<!-- 新增供应商服务组件 -->
<template>
  <div class="base-info">
    <a-modal
      v-model:visible="modelVisible"
      :title="props.title"
      @cancel="handleCancel"
      @ok="handleBeforeOk"
    >
      <a-form :model="form" auto-label-width>
        <a-form-item field="name" label="服务名称:">
          <a-input v-model="form.name" />
        </a-form-item>
        <a-form-item field="post" label="内容描述:">
          <a-input v-model="form.des" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watch, watchEffect } from 'vue';
  import { cloneDeep } from 'lodash';

  const props = withDefaults(
    defineProps<{
      title: string;
      visible: boolean; // 是否显示对话框
      ServiceData: any;
    }>(),
    {
      visible: false
    }
  );

  const emits = defineEmits(['update:visible', 'addServicelist']);

  const modelVisible = computed({
    get() {
      return props.visible;
    },

    set(visible) {
      emits('update:visible', visible);
    }
  });

  let form = ref(cloneDeep(props.ServiceData));

  watchEffect(() => {
    if (modelVisible.value) form.value = cloneDeep(props.ServiceData);
  });

  const handleBeforeOk = () => {
    if (props.title === '新增服务内容') {
      emits('addServicelist', form.value, 'add');
    } else {
      emits('addServicelist', form.value, 'Edit');
    }
    modelVisible.value = false;
  };
  const handleCancel = () => {
    modelVisible.value = false;
  };
</script>

<style scoped lang="less">
  .base-info {
    padding: 0 40px;
  }
</style>
